<template>
    <el-container class="user-management">
        <el-header height="48">
            <el-row>
                <el-col :span="12">
                    <el-button type="primary" size="small" @click="createUser">新增</el-button>
                    <el-button type="primary" size="small" @click="refresh">刷新</el-button>
                </el-col>
                <!-- <el-col :span="12">
                    <el-input placeholder="Search by name" v-model="searchQuery" />
                </el-col> -->
            </el-row>
        </el-header>
        <el-main>
            <el-table :data="users" size="small" :border="true" style="width: 100%" height="calc(100% - 64px)">
                <el-table-column type="index" label="#" width="50" align="center"></el-table-column>
                <el-table-column prop="username" label="用户名" width="180" align="center"></el-table-column>
                <el-table-column prop="nickname" label="昵称" width="180" align="center"></el-table-column>
                <el-table-column prop="email" label="邮箱" width="180" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机" width="180" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" width="180" align="center">
                    <template v-slot="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
                            {{ scope.row.status === 1 ? '启用' : '禁用' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template v-slot="scope">
                        <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="deleteUser(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <!-- 用户创建更新模态框 -->
        <el-dialog title="用户信息" v-model="userFormModal.visible">
            <el-form :model="userFormModal.userForm" :rules="userFormModal.userRules" ref="userForm" label-width="80px"
                label-suffix=":">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="userFormModal.userForm.username"
                        :disabled="userFormModal.userForm.id !== null" />
                </el-form-item>
                <el-form-item label="昵称" prop="nickname">
                    <el-input v-model="userFormModal.userForm.nickname" />
                </el-form-item>
                <el-form-item label="密码" prop="password" v-if="!userFormModal.userForm.id">
                    <el-input v-model="userFormModal.userForm.password" type="password" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="userFormModal.userForm.email" />
                </el-form-item>
                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="userFormModal.userForm.mobile" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="userFormModal.userForm.status">
                        <el-option label="启用" :value="1"></el-option>
                        <el-option label="禁用" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="userFormModal.visible = false">取 消</el-button>
                <el-button type="primary" @click="submitUserForm">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</template>

<script>
import userApi from "@/api/user";

export default {
    data() {
        return {
            users: [],
            searchQuery: "",
            userFormModal: {
                visible: false,
                userForm: {
                    id: null,
                    username: "",
                    nickname: "",
                    password: "",
                    email: "",
                    mobile: "",
                    status: 1,
                },
                userRules: {
                    username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                    nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
                    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
                },
            }
        };
    },
    created() {
        this.refresh();
    },
    methods: {
        refresh() {
            this.fetchUsers();
        },
        fetchUsers() {
            userApi.getAllUsers().then((response) => {
                this.users = response.data;
            });
        },
        createUser() {
            this.userFormModal.visible = true;
            this.userFormModal.userForm = {
                id: null,
                username: "",
                nickname: "",
                password: "",
                email: "",
                mobile: "",
                status: 1,
            };
        },
        editUser(user) {
            this.userFormModal.userForm = { ...user };
            this.userFormModal.visible = true;
        },
        submitUserForm() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    // Submit the form
                    if (this.userFormModal.userForm.id) {
                        userApi.updateUser(this.userFormModal.userForm).then(() => {
                            this.$message.success("用户更新成功");
                            this.userFormModal.visible = false;
                            this.refresh();
                        });
                    } else {
                        userApi.createUser(this.userFormModal.userForm).then(() => {
                            this.$message.success("用户创建成功");
                            this.userFormModal.visible = false;
                            this.refresh();
                        });
                    }
                } else {
                    this.$message.error("表单验证失败");
                }
            });
        },
        deleteUser(userId) {
            this.$confirm("确定要删除该用户吗？", "提示", {
                type: "warning"
            }).then(() => {
                userApi.deleteUser(userId).then(() => {
                    this.$message.success("用户删除成功");
                    this.refresh();
                });
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.user-management {
    background-color: #ffffff;

    .el-header {
        font-size: 24px;
        font-weight: bold;
        padding: 10px 20px;
    }

    .el-main {
        padding: 10px 20px;
    }

    .el-table {
        .el-table-column {
            text-align: center;
        }
    }
}
</style>